<template>
	<view class="dept-select-dlg">
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"
			style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background-color: #ffffff;
			border-bottom: 1px solid #ebedf0;">
			<view :style="{height: titleNavHeight + 'px', top: statusBarHeight + 'px', width: '100%'}"
				class="nav-bar">
				<u-icon name="arrow-left" size="42" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"
					@click="onBack()"></u-icon>
				<text class="text">部门选择</text>
			</view>
		</view>
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"></view>
		<online-filter-box style="background: white; padding: 0px 18px;"
			@reset="onReset()"
			@refresh="refreshDept"
		>
			<!-- 过滤字段 -->
				<p style="font-size: 28rpx;color: #333333;height: 40rpx;line-height: 40rpx;margin-bottom: 20rpx;">
					部门名称
				</p>
				<u-search bg-color="#f7f8fa" :show-action="false"
				 shape="square" v-model="formFilter.deptName" />
		</online-filter-box>
		<view class="main-box">
			<CustomList
				ref="cardList"
				height="100%"
				:isLoading="tableWidget.loading"
				:finished="tableWidget.finished"
				:dataList="tableWidget.dataList"
				@load="tableWidget.loadDataList"
			>
				<view
					class="dept-item"
					v-for="data in tableWidget.dataList"
					:key="data[rowKey]"
					@click="onSelectChange(data, !isSelect(data))"
				>
					<u-checkbox class="select" shape="square" icon-size="16px" :value="isSelect(data)" />
					<view class="text"
						style="color: #333333; font-size: 14px; font-weight: bold; height: 25px; line-height: 25px; margin-left: -5px">
						{{ data.deptName }}
					</view>
				</view>
			</CustomList>
		</view>
		<view class="menu-box flex-row-between">
			<u-button size="medium" @click="onBack()" :custom-style="customStyle">取消</u-button>
			<u-button type="primary" size="medium" @click="onSubmit()" :custom-style="customStyle1">保存</u-button>
		</view>
	</view>
</template>

<script>
	import CustomList from '@/views/components/CustomList.vue';
	import { TableWidget } from '@/utils/widget.js';
	import { SysCommonBizController } from '@/api';
  import {getBoundingClientRect} from "@/utils";

	export default {
		name: 'deptSelectDlg',
		props: {
			value: {
				type: [Number, String, Array]
			},
			multiple: {
				type: Boolean,
				default: false
			},
			rowKey: {
				type: String,
				default: 'deptId'
			}
		},
		components: {
			CustomList
		},
		data() {
			const {
				windowWidth,
				statusBarHeight
			} = uni.getSystemInfoSync()
      const rect = getBoundingClientRect(windowWidth, statusBarHeight);
			return {
				windowWidth: windowWidth,
				statusBarHeight: statusBarHeight,
				titleNavHeight: (rect.top - statusBarHeight) * 2 + rect.height,
				emptyWidth: rect.left - 10,
				selectAll: false,
				selectItems: [],
				deptList: [],
				formFilter: {
					deptName: undefined
				},
				customStyle:{
					borderRadius: '0',
					border:'1px solid #ebedf0'
				},
				customStyle1:{
					borderRadius: '0',
				},
				tableWidget: new TableWidget(this.loadTableData, this.loadTableDataVerify, true)
			}
		},
		methods: {
			onReset() {
				this.formFilter.deptName = undefined;
				this.refreshDept();
			},
			refreshDept() {
				if (this.$refs.cardList) this.$refs.cardList.reset();
			},
			loadTableData (params) {
				if (params == null) params = {};
				params = {
					...params,
					widgetType: 'upms_dept',
					filter: {
						deptName: this.formFilter.deptName
					}
				};
				params.pageParam.count = false;
				return new Promise((resolve, reject) => {
					SysCommonBizController.list(this, params).then(res => {
						resolve({
							dataList: res.dataList,
							totalCount: res.totalCount
						});
					}).catch(e => {
						reject(e);
					});
				});
			},
			 loadTableDataVerify() {
				return true;
			},
			isSelect(data) {
				if (data == null) return false;
				return this.selectItems.indexOf(data[this.rowKey]) !== -1;
			},
			onSelectChange(data, val) {
				if (data == null || data[this.rowKey] == null) return;
				if (val) {
					if (this.selectItems.indexOf(data[this.rowKey]) === -1) {
						if (this.multiple) {
							this.selectItems.push(data[this.rowKey]);
						} else {
							this.selectItems = [data[this.rowKey]];
						}
					}
				} else {
					this.selectItems = this.selectItems.filter(item => {
						return item !== data[this.rowKey];
					});
				}
			},
			onBack() {
				this.reset();
				this.$emit('close');
			},
			onSubmit() {
				this.$emit('input', this.selectItems);
				this.$emit('change', this.selectItems);
				this.onBack();
			},
			reset() {
				if (this.multiple) {
					this.selectItems = this.value || [];
				} else {
					this.selectItems = Array.isArray(this.value) ? this.value : (this.value == null ? [] : [this.value]);
				}
			}
		},
		watch: {
			value: {
				handler() {
					this.reset();
				},
				immediate: true
			}
		},
		mounted() {
			if (this.$refs.cardList) {
				this.$nextTick(() => {
					this.$refs.cardList.reset();
				})
			}
		}
	}
</script>

<style lang="less">
	.dept-select-dlg {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F6F7F9;

		.nav-bar {
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 20rpx;

			.text {
				width: calc(100vw - 80px);
				color: #323233;
				font-weight: 500;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				justify-items: center;
			}
		}

		.main-box {
			flex: 1;
			overflow: auto;
			padding: 0px 32rpx;

			.dept-item {
				display: flex;
				align-items: center;
				background: white;
				border-radius: 8rpx;
				padding: 30rpx 56rpx 30rpx 26rpx;
				position: relative;
				margin-top: 32rpx;

				.text {
					color: #666666;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
		}

		.menu-box {
			flex-grow: 0;
			flex-shrink: 0;
			width: 100%;
			padding: 20rpx 30rpx;
			flex-wrap: nowrap;
			background: white;
			box-sizing: border-box;
			margin-top: 30rpx;
			button::after{
				border-radius: 0 !important;
				border: none;
			}
			&>u-button,
			&>.u-btn{
				&:first-child {
					width: 24%;
				}

				&:last-child {
					width: 74%;
				}
			}
		}
	}
</style>
